<!-- 起步 -->
<template>
	<div class='container'>
		<a-layout>
			<a-layout-content class='layout-content' ref='content'>
				<a-card>
					<h1>首页</h1>
					<div id="box1" class="box">
						<h2>1. 创建 home 分支</h2>
						<p>运行如下的命令，基于 master 分支在本地创建 home 子分支，用来开发和 home 首页相关的功能：</p>
						<div class="code">
							<code-mirror :value="code.code1" :options="cmOptions"> </code-mirror>
						</div>
					</div>
					<div id="box2" class="box">
						<h2>2. 配置网络请求</h2>
						<p>由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用
							@escook/request-miniprogram 第三方包发起网络数据请求。</p>
						<div class="tip">
							请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用
						</div>
						<div class="tp">
							官方文档：<a
								href="https://www.npmjs.com/package/@escook/request-miniprogram">https://www.npmjs.com/package/@escook/request-miniprogram</a>
						</div>
						<p>最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：</p>
						<div class="code">
							<code-mirror :value="code.code2" :options="cmOptions"> </code-mirror>
						</div>
					</div>
					<div id="box3" class="box">
						<h2>3. 轮播图区域</h2>
						<div class="item" id="box3-1">
							<h3>3-1. 请求轮播图的数据</h3>
							<p>实现步骤：</p>
							<ol>
								<li>在 data 中定义轮播图的数组</li>
								<li>在 onLoad 生命周期函数中调用获取轮播图数据的方法</li>
								<li>在 methods 中定义获取轮播图数据的方法</li>
							</ol>
							<p>实例代码</p>
							<div class="code">
								<code-mirror :value="code.code3" :options="cmOptions"> </code-mirror>
							</div>
						</div>
						<div class="item" id="box3-2">
							<h3>3-2. 渲染轮播图的 UI 结构</h3>
							<ol>
								<li>
									<p>渲染 UI 结构：</p>
									<div class="code">
										<code-mirror :value="code.code4" :options="cmOptions1"> </code-mirror>
									</div>
								</li>
								<li>
									<p>美化 UI 结构：</p>
									<div class="code">
										<code-mirror :value="code.code5" :options="cmOptions2"> </code-mirror>
									</div>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-3">
							<h3>3-3. 配置小程序分包</h3>
							<div class="tip">
								分包可以减少小程序首次启动时的加载时间
							</div>
							<p>为此，我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。在 uni-app 项目中，配置分包的步骤如下：</p>
							<ol>
								<li>
									在项目根目录中，创建分包的根目录，命名为 subpkg
								</li>
								<li>
									<p>在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：</p>
									<code-mirror :value="code.code6" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>在 subpkg 目录上鼠标右键，点击 新建页面 选项，并填写页面的相关信息：</p>
									<el-image style="width: 100%;" :src="srcList[0]" fit="contain"
										:preview-src-list="srcList">
									</el-image>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-4">
							<h3>3-4. 点击轮播图跳转到商品详情页面</h3>
							<p>将 swiper-item 节点内的 view 组件，改造为 navigator 导航组件，并动态绑定 url 属性 的值。</p>
							<ol>
								<li>
									<p>改造之前的 UI 结构：</p>
									<code-mirror :value="code.code7" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>改造之后的 UI 结构：</p>
									<code-mirror :value="code.code8" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box3-5">
							<h3>3-5. 封装 uni.$showMsg() 方法</h3>
							<p>当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化
								uni.showToast() 方法的调用。具体的改造步骤如下：</p>
							<ol>
								<li>
									<p>在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：</p>
									<code-mirror :value="code.code9" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：</p>
									<code-mirror :value="code.code10" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div id="box4" class="box">
						<h2>4. 分类导航区域</h2>
						<div class="item" id="box4-1">
							<h3>4-1. 获取分类导航的数据</h3>
							<p>实现思路：</p>
							<ol>
								<li>定义 data 数据</li>
								<li>在 onLoad 中调用获取数据的方法</li>
								<li>在 methods 中定义获取数据的方法</li>
								<p>示例代码如下：</p>
								<code-mirror :value="code.code11" :options="cmOptions"> </code-mirror>
							</ol>
						</div>
						<div class="item" id="box4-2">
							<h3>4-2. 渲染分类导航的 UI 结构</h3>
							<ol>
								<li>
									<p>定义如下的 UI 结构：</p>
									<code-mirror :value="code.code12" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>通过如下的样式美化页面结构：</p>
									<code-mirror :value="code.code13" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box4-3">
							<h3>4-3. 渲染分类导航的 UI 结构</h3>
							<ol>
								<li>
									<p>为 nav-item 绑定点击事件处理函数：</p>
									<code-mirror :value="code.code14" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>定义 navClickHandler 事件处理函数：</p>
									<code-mirror :value="code.code15" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div class="box" id="box5">
						<h2>5. 楼层区域</h2>
						<div class="item" id="box5-1">
							<h3>5-1. 获取楼层数据</h3>
							<p>实现思路：</p>
							<ol>
								<li>定义 data 数据</li>
								<li>在 onLoad 中调用获取数据的方法</li>
								<li>在 methods 中定义获取数据的方法</li>
							</ol>
							<p>示例代码如下：</p>
							<code-mirror :value="code.code16" :options="cmOptions"> </code-mirror>
						</div>
						<div class="item" id="box5-2">
							<h3>5-2. 渲染楼层的标题</h3>
							<ol>
								<li>
									<p>定义如下的 UI 结构：</p>
									<code-mirror :value="code.code17" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化楼层标题的样式：</p>
									<code-mirror :value="code.code18" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box5-3">
							<h3>5-3. 渲染楼层里的图片</h3>
							<ol>
								<li>
									<p>定义楼层图片区域的 UI 结构：</p>
									<code-mirror :value="code.code19" :options="cmOptions1"> </code-mirror>
								</li>
								<li>
									<p>美化楼层图片区域的样式：</p>
									<code-mirror :value="code.code20" :options="cmOptions"> </code-mirror>
								</li>
							</ol>
						</div>
						<div class="item" id="box5-4">
							<h3>5-4. 点击楼层图片跳转到商品列表页</h3>
							<ol>
								<li>
									<p>在 subpkg 分包中，新建 goods_list 页面</p>
									<el-image style="width: 100%;" :src="srcList[1]" fit="contain"
										:preview-src-list="srcList">
									</el-image>
								</li>
								<li>
									<p>楼层数据请求成功之后，通过双层 forEach 循环，处理 URL 地址：</p>
									<code-mirror :value="code.code21" :options="cmOptions"> </code-mirror>
								</li>
								<li>
									<p>把图片外层的 view 组件，改造为 navigator 组件，并动态绑定 url 属性 的值：</p>
									<code-mirror :value="code.code22" :options="cmOptions1"> </code-mirror>
								</li>
							</ol>
						</div>
					</div>
					<div id="box6" class="box">
						<h2>6. 分支的提交与合并</h2>
						<ol>
							<li>
								<p>将本地的 home 分支进行本地的 commit 提交:</p>
								<div class="code">
									<code-mirror :value="code.code23" :options="cmOptions"> </code-mirror>
								</div>
							</li>
							<li>
								<p>将本地的 home 分支推送到远程仓库进行保存：：</p>
								<div class="code">
									<code-mirror :value="code.code24" :options="cmOptions"> </code-mirror>
								</div>
							</li>
							<li>
								<p>将本地的 tabbar 分支合并到本地的 master 分支：</p>
								<div class="code">
									<code-mirror :value="code.code25" :options="cmOptions"> </code-mirror>
								</div>
							</li>
							<li>
								<p>删除本地的 home 分支：</p>
								<div class="code">
									<code-mirror :value="code.code26" :options="cmOptions"> </code-mirror>
								</div>
							</li>
						</ol>
					</div>
				</a-card>
			</a-layout-content>
			<a-layout-sider class='layout-sider' width='300'>
				<a-anchor affix :getContainer='getContainer'  :wrapperStyle="{maxHeight: 'calc( 100vh - 120px)'}"	@click="handleClick">
					<a-anchor-link href="#box1" title="1. 创建 home 分支" />
					<a-anchor-link href="#box2" title="2. 配置网络请求" />
					<a-anchor-link href="#box3" title="3. 轮播图区域" >
						<a-anchor-link href="#box3-1" title="3-1. 请求轮播图的数据" />
						<a-anchor-link href="#box3-2" title="3-2. 渲染轮播图的 UI 结构" />
						<a-anchor-link href="#box3-3" title="3-3. 配置小程序分包" />
						<a-anchor-link href="#box3-4" title="3-4. 点击轮播图跳转到商品详情页面" />
						<a-anchor-link href="#box3-5" title="3-5. 封装 uni.$showMsg() 方法" />
					</a-anchor-link>
					<a-anchor-link href="#box4" title="4. 分类导航区域" >
						<a-anchor-link href="#box4-1" title="4-1. 获取分类导航的数据" />
						<a-anchor-link href="#box4-2" title="4-2. 渲染分类导航的 UI 结构" />
						<a-anchor-link href="#box4-3" title="4-3. 渲染分类导航的 UI 结构" />
					</a-anchor-link>
					<a-anchor-link href="#box5" title="5. 楼层区域" >
						<a-anchor-link href="#box5-1" title="5-1. 获取楼层数据" />
						<a-anchor-link href="#box5-2" title="5-2. 渲染楼层的标题" />
						<a-anchor-link href="#box5-3" title="5-3. 渲染楼层里的图片" />
						<a-anchor-link href="#box5-4" title="5-4. 点击楼层图片跳转到商品列表页" />
					</a-anchor-link>
					<a-anchor-link href="#box6" title="6. 分支的提交与合并" />
				</a-anchor>
			</a-layout-sider>
		</a-layout>

	</div>
</template>
<script>
	import img1 from '@/assets/img3/img3-1.png'
	import img2 from '@/assets/img3/img3-2.png'
	import {
		homeView
	} from '../../util/code.js'
	export default {
		name: 'homeView',
		data() {
			return {
				srcList: [
					img1, img2
				],
				cmOptions: {
					mode: "javascript",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions1: {
					mode: "vue",
					theme: "base16-dark",
					disabled: true
				},
				cmOptions2: {
					mode: "sass",
					theme: "base16-dark",
					disabled: true
				},
				code: homeView
			}
		},
		methods: {
			getContainer() {
				return this.$refs.content.$el
			},
			handleClick(e, link) {
				// 阻止点击的默认事件修改路由
				e.preventDefault();
				if (link.href) {
					let ele = document.getElementById(link.href);
					ele && ele.scrollIntoView({
						block: 'start',
						behavior: 'smooth'
					});
				}
			}
		}
	}
</script>
<style scoped>
</style>
